<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>个人信息</title>
    <meta name="decorator" content="default"/>
    <style>
        p.p_num {
            width: 78px;
            height: 24px;
            border-top: solid 1px #d0d0d0;
            position: relative;
            border-bottom: solid 1px #d0d0d0;
            margin-top: -3px;
        }

        span.sy_minus, span.sy_plus {
            width: 15px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            display: block;
            position: absolute;
            top: 5px;
            font-size: 14px;
            border: solid 1px #d0d0d0;
            background: #ebebeb;
            cursor: pointer;
            border-top: none;
            border-bottom: none;
        }

        span.sy_minus {
            left: 3px;
        }

        span.sy_plus {
            right: -17px;
        }

        input.sy_num {
            width: 44px;
            height: 18px;
            line-height: 24px;
            text-align: center;
            position: absolute;
            top: 5px;
            left: 20px;
        }

        span.sy_num {
            padding: 5px 8px;
            border: solid 1px #d0d0d0;
            border-left: none;
            border-right: none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var goodsInfosJson = {};
        function addGoods() {
            var goodsNum = $("#goodsNum").val();
            /* var goodsSum = Number($("#goodsSum")[0].innerHTML);
             var price = "";
             var goodsInfoJson = {};
             if(!!goodsInfosJson[goodsNum]){
             price = $("#goodsPrice_"+goodsNum)[0].innerHTML;
             goodsInfoJson.goodsCount = parseInt($("#sy_num_gid_"+goodsNum).val())+1;
             $("#sy_num_gid_"+goodsNum).attr("value",parseInt($("#sy_num_gid_"+goodsNum).val())+1);
             $("#goodsTotal_"+goodsNum)[0].innerHTML=(Number($("#goodsTotal_"+goodsNum)[0].innerHTML)+Number(price)).toFixed(2);
             }else {*/
            $.ajax({
                url: '${ctx}/sys/tbShopProduct/getGoodsInfo',
                data: {"goodsNum": goodsNum},
                dataType: 'json',
                cache: false,
                async: false,
                success: function (data) {
                    /* price = data.price;
                     goodsInfoJson.goodsCount = 1;*/
                    /*  $("#goodsList").append("<tr id='goodsTr_"+goodsNum+"'>"+"<td>"+data.name+"</td>"+"<td>"+data.color+"</td>"+"<td id='goodsPrice_"+goodsNum+"'>"+(data.price).toFixed(2)+"</td>"+"<td>"+
                     "<p class='p_num'><span class='sy_minus' onclick ='sy_minus_gid("+'"'+goodsNum+'"'+")'>-</span>"+
                     "<input class='sy_num' id='sy_num_gid_"+goodsNum+"' readonly='readonly' type='text' name='number1' value='1' />"+
                     "<span class='sy_plus'  onclick ='sy_plus_gid("+'"'+goodsNum+'"'+")'>+</span></p>"
                     +"</td>"+"<td id='goodsTotal_"+goodsNum+"'>"+(data.price).toFixed(2)+"</td>"+"<td ><input type='button' value='删除' onclick='deleteGoods("+'"'+goodsNum+'"'+")'/></td>"+"</tr>");*/

                    $("#remGoodsNum").attr("value", goodsNum);
                    var select = $("#colorList");
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];

                            var option = new Option(item.color, item.price);
                            if (i == 0) {
                                $("#goodsName").text(item.name);
                                option.selected = true;
                                select.prev("div").find("a").find("span:first").text("sss")
                            }
                            select[0].options.add(option);
                        }
                        addGoodsToList();
                    } else {
                        alert("商品不存在或种类错误");
                    }

                }
            })
            /* }*/
            /* $("#goodsNum").val("");
             goodsSum=goodsSum+Number(price);
             $("#goodsSum")[0].innerHTML=goodsSum.toFixed(2);
             goodsInfosJson[goodsNum]=goodsInfoJson;
             $("#goodsInfoList").attr("value",JSON.stringify(goodsInfosJson));
             $("#message1").text("");
             $("#goodsNum")[0].focus();*/
        }

        function addGoodsToList() {

            var color = $("#colorList").find("option:selected").text();
            var price = $("#colorList").find("option:selected").val();
            var name = $("#goodsName").text();
            var goodsNum = $("#remGoodsNum").val();
            var goodsSum = Number($("#goodsSum")[0].innerHTML);
            var goodsInfoJson = goodsInfosJson[goodsNum]
            if (typeof(goodsInfoJson) != "undefined") {
                if (typeof(goodsInfoJson[color]) != "undefined") {
                    goodsInfoJson[color] = parseInt($("#sy_num_gid_" + goodsNum + "_" + color).val()) + 1;
                    $("#sy_num_gid_" + goodsNum + "_" + color).attr("value", parseInt($("#sy_num_gid_" + goodsNum + "_" + color).val()) + 1);
                    $("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML = (Number($("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML) + Number(price)).toFixed(2);
                } else {
                    $("#goodsList").append("<tr id='goodsTr_" + goodsNum + "_" + color + "'>" + "<td>" + name + "</td>" + "<td>" + color + "</td>" + "<td id='goodsPrice_" + goodsNum + "_" + color + "'>" + price + "</td>" + "<td>" +
                            "<p class='p_num'><span class='sy_minus' onclick =" + "sy_minus_gid('" + goodsNum + "','" + color + "')" + ">-</span>" +
                            "<input class='sy_num' id='sy_num_gid_" + goodsNum + "_" + color + "' readonly='readonly' type='text' name='number1' value='1' />" +
                            "<span class='sy_plus'  onclick =" + "sy_plus_gid('" + goodsNum + "','" + color + "')" + ">+</span></p>"
                            + "</td>" + "<td id='goodsTotal_" + goodsNum + "_" + color + "'>" + price + "</td>" + "<td >" +
                            "<input type='button' value='删除' onclick=" + "deleteGoods('" + goodsNum + "','" + color + "')>" + "</input>" +
                            "</td>" + "</tr>");
                    goodsInfoJson[color] = 1;
                }
            } else {
                $("#goodsList").append("<tr id='goodsTr_" + goodsNum + "_" + color + "'>" + "<td>" + name + "</td>" + "<td>" + color + "</td>" + "<td id='goodsPrice_" + goodsNum + "_" + color + "'>" + price + "</td>" + "<td>" +
                        "<p class='p_num'><span class='sy_minus' onclick =" + "sy_minus_gid('" + goodsNum + "','" + color + "')" + ">-</span>" +
                        "<input class='sy_num' id='sy_num_gid_" + goodsNum + "_" + color + "' readonly='readonly' type='text' name='number1' value='1' />" +
                        "<span class='sy_plus'  onclick =" + "sy_plus_gid('" + goodsNum + "','" + color + "')" + ">+</span></p>"
                        + "</td>" + "<td id='goodsTotal_" + goodsNum + "_" + color + "'>" + price + "</td>" + "<td >" +
                        "<input type='button' value='删除' onclick=" + "deleteGoods('" + goodsNum + "','" + color + "')>" + "</input>" +
                        "</td>" + "</tr>");
                goodsInfoJson = {};
                goodsInfoJson[color] = 1;
            }
            $("#goodsNum").val("");
            goodsSum = goodsSum + Number(price);
            $("#goodsSum")[0].innerHTML = goodsSum.toFixed(2);
            goodsInfosJson[goodsNum] = goodsInfoJson;
            $("#goodsInfoList").attr("value", JSON.stringify(goodsInfosJson));
            $("#message1").text("");
            $("#goodsNum")[0].focus();
            $("#colorList").find("option:not(:first)").remove();
            $(".select2-chosen").text("请选择");
            $("#goodsName").text("");
        }

        function sy_plus_gid(goodsNum, color) {
            var goodsSum = Number($("#goodsSum")[0].innerHTML);
            var value = parseInt($("#sy_num_gid_" + goodsNum + "_" + color).val());
            var goodsInfoJson = goodsInfosJson[goodsNum];
            goodsInfoJson[color] = value + 1;
            goodsInfosJson[goodsNum] = goodsInfoJson;
            $("#goodsInfoList").attr("value", JSON.stringify(goodsInfosJson));
            $("#sy_num_gid_" + goodsNum + "_" + color).attr("value", value + 1);
            var goodsTotal = Number($("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML);
            var goodsPrice = Number($("#goodsPrice_" + goodsNum + "_" + color)[0].innerHTML);
            $("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML = (goodsTotal + goodsPrice).toFixed(2)
            goodsSum = goodsSum + goodsPrice;
            $("#goodsSum")[0].innerHTML = goodsSum.toFixed(2);
            /* $("#sumMoney").val(goodsSum.toFixed(2));*/
        }
        function sy_minus_gid(goodsNum, color) {
            var goodsSum = Number($("#goodsSum")[0].innerHTML);
            var value = parseInt($("#sy_num_gid_" + goodsNum + "_" + color).val());
            if (value == 1) {
                return;
            }
            var goodsInfoJson = goodsInfosJson[goodsNum];
            goodsInfoJson[color] = value - 1;
            goodsInfosJson[goodsNum] = goodsInfoJson;
            $("#goodsInfoList").attr("value", JSON.stringify(goodsInfosJson));

            $("#sy_num_gid_" + goodsNum + "_" + color).attr("value", value - 1)
            var goodsTotal = Number($("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML);
            var goodsPrice = Number($("#goodsPrice_" + goodsNum + "_" + color)[0].innerHTML);
            $("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML = (goodsTotal - goodsPrice).toFixed(2)
            goodsSum = goodsSum - goodsPrice;
            $("#goodsSum")[0].innerHTML = goodsSum.toFixed(2);
            /* $("#sumMoney").val(goodsSum.toFixed(2));*/

        }
        function deleteGoods(goodsNum, color) {
            var goodsSum = Number($("#goodsSum")[0].innerHTML);
            var total = Number($("#goodsTotal_" + goodsNum + "_" + color)[0].innerHTML);
            $("#goodsSum")[0].innerHTML = (goodsSum - total).toFixed(2);
            var goodsInfoJson = goodsInfosJson[goodsNum];

            if (Object.keys(goodsInfoJson).length == 1) {
                delete goodsInfosJson[goodsNum];
            } else {
                delete goodsInfoJson[color];
                goodsInfosJson[goodsNum] = goodsInfoJson;
            }

            $("#goodsInfoList").attr("value", JSON.stringify(goodsInfosJson));
            $("#goodsTr_" + goodsNum + "_" + color).remove();
        }
        function calculateMoney() {
            var paySumMoney = $("#paySum").val();
            var goodsSumMoney = $("#goodsSum").text();
            $("#giveSum").text((Number(paySumMoney) - Number(goodsSumMoney)).toFixed(2));
            $("#giveSumId").val((Number(paySumMoney) - Number(goodsSumMoney)).toFixed(2));
        }
        $(document).ready(function () {
            $("#goodsNum")[0].focus();
        })
        function btnSubmit() {
            $("#sumMoney").val($("#goodsSum").text());
            var payWayList = document.getElementsByName("payWay");
            var goodsList = $("#goodsInfoList").val();
            if (goodsList == "{}" || goodsList == "") {
                alert("至少一件商品")
                return;
            }

            var payType = $(":radio[name='payWay']:checked").val();
            console.log(payType);
            if (payType == 4 || payType == 5) {
                var mobile = $("#mobile").val();
                var code = $("#code").val();
                console.log(mobile);
                console.log(!mobile);
                console.log(code);
                console.log(!code);

                if (!mobile) {
                    alert("请输入手机号！");
                    return;
                }
                if (!code) {
                    alert("请输入付款码！");
                    return;
                }

            }
            for (var i = 0; i < payWayList.length; i++) {
                if (payWayList.item(i).checked) {
                    var payWay = payWayList.item(i).getAttribute("value");

                    if (payWay == "3") {
                        var paySum = $("#paySum").val();
                        if (paySum == "") {
                            alert("请输入付款金额");
                            return;
                        } else if (Number($("#paySum").val()) - Number($("#goodsSum").text()) < 0) {
                            alert("支付金额小于订单金额");
                            return;
                        }
                    } else {
                        //$("#paySum").val($("#goodsSum").text());
                    }
                }
            }
            var form = $("#inputForm");
            $.post(form.prop("action"), form.serialize(), function (data) {
                //alert(data);
                if(data.indexOf("结算成功") >= 0){
                    alert("结算成功");
                    window.location.href = "/a/sys/tbShopProduct/offineShoppingOrderInfo?orderId=" + data.split(":")[1];
                }else{
                    alert(data);
                }
            });
        }

        $(document).ready(function () {
            $("#btnMenu").hide();
        });

        $(document).on("change", ":radio[name='payWay']", function () {
            if ($(this).val() == 4 || $(this).val() == 5) {
                $("#wyPay").show();
            } else {
                $("#wyPay").hide();
            }
        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a>购物结算</a></li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/tbShopProduct/updateGoodlsInfo" method="post"
           class="form-horizontal"><%--
		<form:hidden path="email" htmlEscape="false" maxlength="255" class="input-xlarge"/>
		<sys:ckfinder input="email" type="files" uploadPath="/mytask" selectMultiple="false"/> --%>
<sys:message content="${message}"/>
<div class="control-group">
    <label class="control-label">条形编码:</label>
    <input id="goodsNum" maxlength="50" onchange="addGoods()"/>
    <span style="margin-left:30px;display:none;">商品名称：<span id="goodsName"></span></span>
        <span style="margin-left:30px;display: none;"><span>商品规格：</span>
            <select id="colorList" onchange="addGoodsToList()">
                <option value="0">请选择</option>
            </select>
        </span>
    <input id="remGoodsNum" type="hidden"/>
</div>
<div class="control-group">
    <label class="control-label">付款金额:</label>
    <div class="controls">

        <span style="margin-left: 10px;font-size:20px;font-weight:600;">应付：<span id="goodsSum">0.00</span>元</span>
        <span style="margin-left: 50px;font-size:20px;font-weight:600;">实付：<input id="paySum" name="paySum" value="0.00"
                                                                                  onblur="calculateMoney()"/></span>
        <span style="margin-left: 50px;font-size:20px;font-weight:600;">找零：<span id="giveSum">0.00</span>元</span>
        <span id="message1" style="margin-left: 50px;color: red; font-size: 12px;">${alerMessage}</span>
    </div>
</div>
<div class="control-group">
    <label class="control-label">支付方式:</label>
  <%-- <c:forEach var="map" items="${payWayList}">
        <label><span style="margin-left:30px;">${map.value}<input type="radio" name="payWay" value="${map.key}"
                                                                  <c:if test="${map.key=='3'}">checked</c:if>/></span></label>
    </c:forEach>--%>
    <label><span style="margin-left:30px;">现金<input type="radio" name="payWay" value="1" checked
                                                              <c:if test="${map.key=='1'}">checked</c:if>/></span></label>
    <label><span style="margin-left:30px;">微信<input type="radio" name="payWay" value="2"
                                                    <c:if test="${map.key=='2'}">checked</c:if>/></span></label>
    <label><span style="margin-left:30px;">支付宝<input type="radio" name="payWay" value="3"
                                                    <c:if test="${map.key=='3'}">checked</c:if>/></span></label>
    <label><span style="margin-left:30px;">物业钱包<input type="radio" name="payWay" value="4"
                                                    <c:if test="${map.key=='4'}">checked</c:if>/></span></label>
    <label><span style="margin-left:30px;">麻雀钱包<input type="radio" name="payWay" value="5"
                                                     <c:if test="${map.key=='5'}">checked</c:if>/></span></label>
    <label><span style="margin-left:30px;">其他<input type="radio" name="payWay" value="0"
                                                      <c:if test="${map.key=='0'}">checked</c:if>/></span></label>
</div>
<div class="control-group">
    <label class="control-label">购物清单:</label>
    <div class="controls">
        <table id="contentTable" class="table table-striped table-bordered table-condensed">
            <thead>
            <th>商品名</th>
            <th>规格</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
            </thead>
            <tbody id="goodsList">

            </tbody>
        </table>
    </div>
    <div class="form-actions">
        <input type="hidden" name="goodsInfoList" id="goodsInfoList"/>
        <input type="hidden" name="sumMoney" id="sumMoney"/>
        <input type="hidden" id="giveSumId" name="giveSum"/>
        <span id="wyPay" style="display: none;">
            手机号码：<input type="text" id="mobile" name="mobile" placeholder="手机号码"/>
           付款码：<input type="text" id="code" name="code" placeholder="付款码"/>
        </span>
        <input class="btn btn-primary" type="button" onclick="btnSubmit()" value="结 算"/>
    </div>

    </form:form>
</body>
</html>